<template>
	<view id="app">
		<canvas canvas-id="myCanvas" />
		<view class="content">
			我应该在 canvas 最上层，不该被矩形挡住
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.drawCanvas();
		},
		methods: {
			/**
			 * canvas 的单位都是 px
			 * 默认尺寸 300px*150px
			 * 先画的层级较低，后画的层级较高
			 * 超出画布的部分不会显示
			 * **/
			drawCanvas() {
				const ctx = wx.createCanvasContext('myCanvas');
				ctx.setStrokeStyle("rgba(0, 128, 0,1)");
				ctx.strokeRect(0, 0, 75, 75);
				ctx.setFillStyle("rgba(0, 128, 0,1)");
				ctx.fillRect(0, 0, 75, 75);

				ctx.setFillStyle("red");
				ctx.fillRect(50, 50, 75, 75);

				ctx.setFillStyle("yellow");
				ctx.fillRect(100, 100, 75, 75);

				ctx.draw(); //一定要调用 draw(),否则不能画出图形
			}
		}
	}
</script>

<style>
	#app {
		position: relative;
	}

	canvas {
		position: absolute;
		z-index: 0;
		background-color: lightblue;
	}

	.content {
		position: absolute;
		z-index: 1;
	}
</style>
